Bootstrap Snippet Menu Hover Effect using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en">
    <head>
      <title>Collapse Navbar</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="fond">
            <div class="contener">
              <a href="#123">
                <div class="volet_1">
                  <div style="height:100%; position:relative;">
                    <div style="position:absolute;bottom:0px; height:60px; width:100%;">
                      <div class="material_txt_deploy">Contact</div>
                    </div>
                  </div>
                </div>
              </a>
              <a href="#123">
                <div class="volet_2">
                  <div style="height:100%; position:relative;">
                    <div style="position:absolute;bottom:0px; height:60px; width:100%;">
                      <div class="material_txt_deploy">Page 1</div>
                    </div>
                  </div>
                </div>
              </a>
              <a href="#123">
                <div class="volet_3">
                  <div style="height:100%; position:relative;">
                    <div style="position:absolute;bottom:0px; height:60px; width:100%;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
body{background: #f1f1f2;}
.text-shadow{text-shadow: 1px 1px 1px #000;}
.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;}
.contener{position: absolute;top: 0px;width:100%;}
.volet_4{background-color: #FD443A;}
.volet_1, .volet_2, .volet_3, .volet_4{position: absolute;height: 200px;width: 100%;top: -140px;box-shadow:1px 1px 16px #333333;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}
.contener:hover .volet_1{top: 80px;background-color: #f1f1f2;-webkit-transform:scale(0.85);-moz-transform:scale(0.85);-ms-transform:scale(0.85);transform:scale(0.85);}
.contener:hover .volet_2{top: 10px;background-color: #f1f1f2;-webkit-transform:scale(0.90);-moz-transform:scale(0.90);-ms-transform:scale(0.90);transform:scale(0.90);}
.contener:hover .volet_3{top: -60px;background-color: #f1f1f2;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}
.menu_btn{cursor: pointer;margin-top: 7px;padding-left: 10px;padding-right: 10px;}
.material_txt{line-height: 60px;color: #ffffff;font-size: 20px;font-weight: 400;font-family: 'Roboto';padding-left: 10px;text-shadow: 1px 1px 1px #000;}
.material_txt_deploy{line-height: 30px;color: #FD443A;font-size: 30px;font-weight: 400;font-family: 'Roboto';padding-left: 20px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Menu Hover Effect"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Related: See More

Questions / Comments:

"Menu Hover Effect" Bootstrap 3.0.0 Snippet by Siddharth Panchal

Related: See More

Questions / Comments:

"Menu Hover Effect"
Bootstrap 3.0.0 Snippet by Siddharth Panchal